<template>
    <el-table
      :data="PermissionArr"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
    >
      <el-table-column label="名称" prop="name"  />
      <el-table-column label="权限值" prop="code"/>
      <el-table-column  label="修改时间" prop="updateTime"/>
      <el-table-column  label="操作">
        <!-- row即为已有的菜单|按钮对象 -->
        <template #="{row,$index}">
            <el-button type="primary" size="small" :disabled="row.level==4" @click="addPermission(row)" v-has="`btn.Permission.add`">{{row.level==3?'添加功能':'添加菜单'}}</el-button>
            <el-button type="primary" size="small" :disabled="row.level==1" @click="updatePermission(row)" v-has="`btn.Permission.update`">编辑</el-button>
            <el-popconfirm :title="`你确定删除${row.name}?`" width="260px" @confirm="removeMenu(row.id)">
                <template #reference>
                    <el-button type="primary" size="small" :disabled="row.level==1" v-has="`btn.Permission.remove`">删除</el-button>
                </template>
            </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 对话框组件：增加或者更新已有的菜单 -->
    <el-dialog
        v-model="dialogVisible"
        :title="menuData.id?'更新菜单':'添加菜单'"
    >
        <!-- 表单组件 -->
        <el-form>
            <el-form-item label="名称">
                <el-input placeholder="请你输入菜单名称" v-model="menuData.name"></el-input>
            </el-form-item>
            <el-form-item label="权限">
                <el-input placeholder="请你输入权限数值" v-model="menuData.code"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="save">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup name="Permission">
    import { onMounted,ref,reactive } from 'vue'
    import {reqRemoveMenu,reqAddOrUpdateMenu,reqAllPermission} from '@/api/acl/menu'
    import type {MenuParams,PermissionResponseData,PermissionList, Permission} from '@/api/acl/menu/type'
    import { ElMessage } from 'element-plus'

    // 存储菜单的数组
    let PermissionArr=ref<PermissionList>([])
    // 控制对话框的显示与隐藏
    let dialogVisible=ref<boolean>(false)
    // 携带的参数
    let menuData=reactive<MenuParams>({
        code:'', 
        level:0, 
        name:'', 
        pid:0 
    })

    // 组件挂载完毕
    onMounted(()=>{
        getHasPermission()
    })

    // 获取菜单数据的方法
    async function getHasPermission(){
        let result:PermissionResponseData=await reqAllPermission()
        if(result.code==200){
            PermissionArr.value=result.data
        }
    }

    // 添加菜单按钮的回调
    function addPermission(row:Permission){
        // 清空数据
        Object.assign(menuData,{
            id:0,
            code:'', 
            level:0, 
            name:'', 
            pid:0 
        })
        // 对话框显示
        dialogVisible.value=true
        // 收集新增菜单的level
        menuData.level=row.level+1
        // 给谁新增子菜单
        menuData.pid=(row.id as number)
    }

    // 更新已有菜单的回调
    function updatePermission(row:Permission){
        // 对话框显示
        dialogVisible.value=true
        // 收集已有菜单数据进行更新
        Object.assign(menuData,row)
    }

    // 确定按钮的回调
    async function save(){
        // 发请求
        let result:any=await reqAddOrUpdateMenu(menuData)
        if(result.code==200){
            // 对话框隐藏
            dialogVisible.value=false
            ElMessage({
                type:'success',
                message:menuData.id?'更新成功':'添加成功'
            })
            // 再次获取全部的最新的菜单的数据
            getHasPermission()
        }
    }

    // 删除按钮的回调
    async function removeMenu(id:number){
        let result:any =await reqRemoveMenu(id)
        if(result.code==200){
            ElMessage({type:'success',message:'删除成功'})
            getHasPermission()
        }
    }
</script>

<style scoped>

</style>